<template>
  <div class="task-create-container">
    <!-- 左侧目录树 -->
    <div class="left-panel">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>文档目录</span>
          </div>
        </template>
        <el-tree :data="directoryTree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all highlight-current />
      </el-card>
    </div>

    <!-- 中间内容展示区 -->
    <div class="center-panel">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>{{ currentNode.label || '文档内容' }}</span>
          </div>
        </template>
        <div class="content-area">
          <div v-if="!currentNode.content" class="empty-content">
            <el-empty description="请选择左侧目录查看内容" />
          </div>
          <div v-else v-html="currentNode.content"></div>
        </div>
      </el-card>
    </div>

    <!-- 右侧审核区 -->
    <div class="right-panel">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>审核信息</span>
          </div>
        </template>

        <!-- 自动审核结果 -->
        <div class="audit-section">
          <h4>自动审核结果</h4>
          <el-alert
            :title="autoAuditResult.status"
            :type="autoAuditResult.type"
            :description="autoAuditResult.description"
            show-icon
            class="mb-10"
          />

          <!-- 分数展示 -->
          <div class="score-box">
            <div class="score-label">审核得分：</div>
            <div class="score-value" :class="getScoreClass(autoAuditResult.score)">{{ autoAuditResult.score }}分</div>
          </div>

          <!-- 审核内容 -->
          <div class="audit-content">
            <el-collapse v-model="activeCollapse">
              <el-collapse-item title="审核详情" name="1">
                <el-descriptions :column="1" border size="small">
                  <el-descriptions-item label="文字错误">
                    <el-tag size="small" :type="autoAuditResult.details.textErrors > 0 ? 'danger' : 'success'">
                      {{ autoAuditResult.details.textErrors }}处
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="格式问题">
                    <el-tag size="small" :type="autoAuditResult.details.formatIssues > 0 ? 'warning' : 'success'">
                      {{ autoAuditResult.details.formatIssues }}处
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="敏感词">
                    <el-tag size="small" :type="autoAuditResult.details.sensitiveWords > 0 ? 'danger' : 'success'">
                      {{ autoAuditResult.details.sensitiveWords }}处
                    </el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </el-collapse-item>
              <el-collapse-item title="审核建议" name="2">
                <div class="suggestion-list">
                  <div v-for="(item, index) in autoAuditResult.suggestions" :key="index" class="suggestion-item">
                    <el-tag size="small" :type="item.type">{{ item.label }}</el-tag>
                    <span class="suggestion-text">{{ item.content }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <!-- 人工审核表单 -->
        <div class="audit-section">
          <h4>人工审核</h4>
          <el-form :model="manualAuditForm" label-width="80px">
            <el-form-item label="审核结果">
              <el-radio-group v-model="manualAuditForm.result">
                <el-radio label="pass">通过</el-radio>
                <el-radio label="reject">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核备注">
              <el-input v-model="manualAuditForm.remarks" type="textarea" rows="4" placeholder="请输入审核备注" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitAudit">提交审核</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 目录树数据
const directoryTree = ref([
  {
    label: '文档目录',
    children: [
      {
        label: '章节一',
        content: '章节一的内容',
      },
      {
        label: '章节二',
        content: '章节二的内容',
      },
    ],
  },
]);

const defaultProps = {
  children: 'children',
  label: 'label',
};

// 当前选中的节点
const currentNode = ref({});
const activeCollapse = ref(['1', '2']);

const getScoreClass = (score) => {
  if (score >= 90) return 'score-high';
  if (score >= 60) return 'score-medium';
  return 'score-low';
};
// 自动审核结果

// 自动审核结果数据更新
const autoAuditResult = reactive({
  status: '审核通过',
  type: 'success',
  description: '文档内容符合规范要求',
  score: 85,
  details: {
    textErrors: 2,
    formatIssues: 1,
    sensitiveWords: 0,
  },
  suggestions: [
    { type: 'warning', label: '建议', content: '第一章节标题描述不够清晰' },
    { type: 'info', label: '提示', content: '建议增加更多图表说明' },
    { type: 'warning', label: '建议', content: '文档结构层次可以更加清晰' },
  ],
});

// 人工审核表单
const manualAuditForm = reactive({
  result: 'pass',
  remarks: '',
});

// 处理节点点击
const handleNodeClick = (data) => {
  currentNode.value = data;
};

// 提交审核
const submitAudit = () => {
  ElMessage.success('审核提交成功');
};
</script>

<style scoped lang="scss">
.task-create-container {
  display: flex;
  gap: 20px;
  height: 100%;
  
  .left-panel {
    width: 250px;
    
    .el-card {
      height: 100%;
      
      :deep(.el-card__body) {
        height: calc(100% - 55px);
        padding: 0;
        overflow: auto;
      }
    }
  }
  
  .center-panel {
    flex: 1;
    
    .el-card {
      height: 100%;
      
      :deep(.el-card__body) {
        height: calc(100% - 55px);
        padding: 10px;
        overflow: auto;
      }
    }
  }
  
  .right-panel {
    width: 350px;
    
    .el-card {
      height: 100%;
      
      :deep(.el-card__body) {
        height: calc(100% - 55px);
        padding: 15px;
        overflow: auto;
      }
    }
  }
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
